<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="calendar.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>
    <div class="father">
        <div id="calendarChris" class="chris-calendar">
            <div class="calendar-header">
                <div class="calendar-header-data">
                    <div class="calendar-header-left list" onclick="calendarBack()"> < </div>
                    <div class="calendar-header-center list-big" id="timeNow">2017</div>
                    <div class="calendar-header-right list" onclick="calendarGo()"> > </div>
                </div>
                <span class="is-today">今天</span>
            </div>
            <div class="calendar-week">
                <div class="week-list">
                    周日
                </div>
                <div class="week-list">
                    周一
                </div>
                <div class="week-list">
                    周二
                </div>
                <div class="week-list">
                    周三
                </div>
                <div class="week-list">
                    周四
                </div>
                <div class="week-list">
                    周五
                </div>
                <div class="week-list">
                    周六
                </div>
            </div>
            <div class="calendar-day" id="calendarDay">
            </div>
            <div class="calendar-right">
                <div class="calendar-right-head">
                    <span class="calendar-right-head-person"></span>
                    <span class="calendar-right-head-time"></span>
                    <span class="calendar-right-head-icon">x</span>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript" src="chris-calendar.js"></script>
</html>